<div class="row">
  <div class="col-sm-1">
    
  </div>
  <div class="col-sm-8">
    <mat-grid-list cols="4" rowHeight="1:3">
      <mat-grid-tile *ngFor="let patient of patientslist" colspan="4">
          <mat-card class="example-card" >
            <mat-card-header>
              <div mat-card-avatar class="example-header-image"></div>
              <mat-card-title>Name : {{patient.FirstName+" "+patient.LastName}}</mat-card-title>
              <mat-card-subtitle>PatientId : {{patient.UserId}}</mat-card-subtitle>
              <mat-card-subtitle>Email Address : {{patient.EmailAddress}}</mat-card-subtitle>
              <mat-card-subtitle>Date of birth : {{patient.Dob}}</mat-card-subtitle>
            </mat-card-header>
            <mat-divider></mat-divider>
            <mat-card-content>
              <mat-list dense>Authorized doctors to access medical-records:
                <mat-list-item *ngFor="let authority of patient.authorized">
                    {{authority}}
                </mat-list-item>
              </mat-list>
              <mat-divider></mat-divider>
              <mat-card-subtitle style="margin-top:5%;"><span>Gender : {{patient.gender}}</span><span style="margin-left:15%;">Age : {{patient.age}}</span>  </mat-card-subtitle>
              <mat-card-subtitle>
                  Address : {{patient.address.number+", "+patient.address.street+", "+
                              patient.address.city+", "+patient.address.country+", " +
                              patient.address.pincode}}.
              </mat-card-subtitle>
              <mat-divider></mat-divider>
              <mat-card-actions>
                <button mat-raised-button color="primary" (click)="ViewMedicalRecords(patient.UserId)"><mat-icon>view_list</mat-icon>View Medical Records</button>
                <button mat-raised-button color="primary" style="float:right" (click)="openDialog(patient)"><mat-icon>add</mat-icon>Add new Medical Record</button>
              </mat-card-actions>
            </mat-card-content>
            
          </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
  <div class="col-sm-3">
    
  </div>
</div>